<template>
	<div class="app-container bgco">
		<div class="filter-container">
			<el-form :model="messa" :rules="rules" ref="messa" size="mini" >
				<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom:10px;">
					<el-tab-pane label="短信配置" name="first">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="12">
								<el-form-item label="accessKeyId:" label-width="150px" prop="accessKeyId">
									<el-input v-model="messa.accessKeyId"></el-input>
								</el-form-item>
								<el-form-item label="accessKeySecret:" label-width="150px" prop="accessKeySecret">
									<el-input v-model="messa.accessKeySecret"></el-input>
								</el-form-item>
								<el-form-item label="验证码模板id:" label-width="150px" prop="codeTplCode">
									<el-input v-model="messa.codeTplCode"></el-input>
								</el-form-item>
								<el-form-item label="短信签名:" label-width="150px" prop="signName">
									<el-input v-model="messa.signName"></el-input>
								</el-form-item>
								<el-form-item label="验证码位数:" label-width="150px" prop="captchaLength">
									<el-input v-model="messa.captchaLength"></el-input>
								</el-form-item>
								<el-form-item label="验证码有效时间(秒):" label-width="150px" prop="captchaExpires">
									<el-input v-model="messa.captchaExpires"></el-input>
									0表示永久有效
								</el-form-item>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
				<el-form-item label-width="150px" class="containbtn">
					<el-button type="primary" class="subbtn" icon="el-icon-success" size="medium" @click="sub('messa')">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import waves from '@/directive/waves' // Waves directive
	import {seemess,savemess} from '@/api/admin/configure' //调用模块接口
	export default {
		name: 'message',
		components: {},
		directives: {
			waves
		},
		data() {
			return {
				activeName: 'first',
				messa:{},
				rules:{
					accessKeyId:[
						{ required: true, message: '请填写accessKeyId', trigger: 'blur' }
					],
					accessKeySecret:[
						{ required: true, message: '请填写accessKeySecret', trigger: 'blur' }
					],
					codeTplCode:[
						{ required: true, message: '请填写验证码模板id', trigger: 'blur' }
					],
					signName:[
						{ required: true, message: '请填写短信签名', trigger: 'blur' }
					],
					captchaLength:[
						{ required: true, message: '请填写验证码位数', trigger: 'blur' }
					],
					captchaExpires:[
						{ required: true, message: '请填写验证码有效时间', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			sub(formName){
				this.$refs[formName].validate((valid) => {
					  if (valid) {//通过验证规则
						savemess({
							"accessKeyId": this.messa.accessKeyId,
							"accessKeySecret": this.messa.accessKeySecret,
							"codeTplCode": this.messa.codeTplCode,
							"signName": this.messa.signName,
							"captchaLength": this.messa.captchaLength,
							"captchaExpires": this.messa.captchaExpires
						}).then(res=>{
							if(res.respCode=='0000'){
								this.$alert('提交成功', {
								  confirmButtonText: '确定',
								  type:'success'
								});
							}
						})
					  } else {//没有通过验证规则
							this.$alert('提交失败,请将内容填写完整', {
								confirmButtonText: '确定',
								type:'warning '
							});
						return false;
					  }
				});
			}
		},
		created() {
			
		},
		mounted(){
			seemess({
				
			}).then(res=>{
				if(res.respCode=='0000'){
					this.messa = res.data.config;
				}
			})
		}
	}
</script>
	
<style scoped="scoped">
	.filter-container{
		background:#fff;
		padding:20px 20px;
		position:relative;
	}
	.mgbt{
		margin-bottom:20px;
	}
	.cloudtit{
		font-size: 18px;
	}
	.inwd{
		width:100%;
	}
	.el-button--medium{
		width:180px;
		height:40px;
	}
</style>